<template>
  <!-- 折线图8  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);

  let option = {
    backgroundColor: "rgba(39,46,74)",
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: "10%",
      top: "10%",
      right: "15%",
      bottom: "10%",
    },
    xAxis: [
      {
        data: ["监测中心站", "调查中心", "核与辐射安全中心", "宣传教育中心"],
        axisLabel: {
          textStyle: {
            color: "rgba(122,173,212,1)",
            fontSize: 14,
          },
          margin: 30, //刻度标签与轴线之间的距离。
        },

        axisLine: {
          show: true, //不显示x轴
          lineStyle: {
            color: "rgba(53,65,95,1)",
          },
        },
        axisTick: {
          show: false, //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(53,65,95,1)",
            type: "dashed",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(122,173,212,1)",
            fontSize: 14,
          },
        },
      },
      {
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 14,
          padding: [0, 0, 10, 30],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#84929f",
          },
        },
        // splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            width: 1,
            // 使用深浅的间隔色
            color: ["#566471", "#566471"],
          },
        },
        axisLabel: {
          show: true,
          fontSize: 14,
          color: "#fff",
          margin: 10,
        },
      },
    ],
    series: [
      {
        name: "同比",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 0, //标记的大小
        itemStyle: {
          // normal: {
          color: "rgba(24,225,255,1)",
          borderColor: "rgba(24,225,255,1)", //圆点透明 边框
          borderWidth: 0,
          lineStyle: {
            color: "rgba(24,225,255,1)",
          },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(24,225,255,0.3)",
              },
              {
                offset: 0.6,
                color: "rgba(24,225,255,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(24,225,255,0.9)",
          // shadowBlur: 20,
        },
        data: ["30", "35", "25", "13"],
      },
      {
        name: "环比",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示

        symbol: "circle", //标记的图形为实心圆
        symbolSize: 0, //标记的大小
        itemStyle: {
          // normal: {
          color: "rgba(194,170,249,1)",
          borderColor: "rgba(194,170,249,1)", //圆点透明 边框
          borderWidth: 0,
          lineStyle: {
            color: "rgba(194,170,249,1)",
          },

          // },
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(194,170,249,0.3)",
            },
            {
              offset: 0.6,
              color: "rgba(194,170,249,0)",
            },
          ]),
        },
        data: ["50", "75", "105", "-130"],
      },
      //柱体
      {
        name: "",
        type: "pictorialBar",
        barWidth: 43,
        yAxisIndex: 1,
        symbolOffset: [0, 0],
        yAxisIndex: 0,
        symbol: "path://M0,10 L10,10 L5,0 L0,10 z",
        itemStyle: {
          normal: {
            //渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#f3de2340",
              },
              {
                offset: 1,
                color: "#f3de2380",
              },
            ]),
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: "#f3de23",
              fontSize: 14,
            },
          },
        },
        data: ["50", "75", "105", "130"],
      },
      //柱底圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [43, 20], //调整截面形状
        symbolOffset: [0, 10],
        barWidth: 43,
        z: 12,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#f3de23",
                },
                {
                  offset: 1,
                  color: "#f3de23",
                },
              ],
              false
            ),
          },
        },
        data: ["50", "75", "105", "130"],
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
